<template>
  <div class="form">
    <span class="title">礼品详情</span>
    <div class="desc">
      兑换说明：
      <p>兑换者或中奖者需登录微信客户端领取奖品。</p>
      <p>系统将在消费者兑换后的24小时内将红包发送至兑换者的微信账号内。</p>
      <p>发送成功后，兑换者会收到微信的零钱入账通知，请注意查收。</p>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="calc(100% - 2rem)"
      top="25vh"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="input-container">
        <label
          >*手机号：
          <input class="phone" v-model.trim="phone" />
        </label>
        <label
          >*验证码：
          <div class="verti-code-container">
            <input class="verti-code" v-model.trim="code" />
            <button @click="sendVertiCode" class="send-verti-code">
              {{ vertiCodeBtnText }}
            </button>
          </div>
        </label>
        <label>
          *门店照片：
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </label>
        <label>
          *门店名称：
          <input class="store-name" v-model.trim="storeName" />
        </label>
        <button @click="submit" class="submit">提交并继续</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      vertiCodeBtnText: "发送验证码",
      dialogVisible: true,
      phone: "",
      code: "",
      imageUrl: "",
      storeName: "",
      timer: null
    };
  },
  methods: {
    sendVertiCode() {
      if (this.phone.length !== 11) {
        alert("请输入正确的电话号码");
        return;
      }
      if (this.vertiCodeBtnText !== "发送验证码") {
        return;
      }
      this.vertiCodeBtnText = "已发送1s";
      let time = 1;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (time === 60) {
          this.vertiCodeBtnText = "发送验证码";
          return;
        }
        this.vertiCodeBtnText = "已发送" + ++time + "s";
      }, 1000);
    },
    submit() {
      if (this.phone && this.code && this.imageUrl && this.storeName) {
        axios.post("/", {}).then(() => {});
      } else {
        alert("请将信息填写完整");
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        alert("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  margin: 0.2rem;
  text-align: left;
  color: #666;
  .title {
    font-size: 1rem;
    font-weight: 700;
  }
  p {
    margin: 0;
  }
  .input-container {
    label {
      display: block;
      input {
        border: 1px solid #ccc;
        border-radius: 0.3rem;
        background: #efefef;
        height: 1.6rem;
      }
      .phone {
        display: block;
        width: 100%;
      }
      .verti-code-container {
        display: flex;
        .verti-code {
          width: 60%;
          border-radius: 0.3rem 0 0 0.3rem;
        }
        .send-verti-code {
          width: 40%;
          height: 1.9rem;
          background: #ee4446;
          border: none;
          outline: none;
          color: #fff;
          border-radius: 0 0.3rem 0.3rem 0;
        }
      }
      .store-name {
        display: block;
        width: 100%;
      }
    }
    .submit {
      margin-top: 1rem;
      border: none;
      outline: none;
      height: 1.9rem;
      line-height: 1.9rem;
      width: 100%;
      border-radius: 2rem;
      text-align: center;
      color: #fff;
      background: #ee4446;
    }
  }
  /deep/ .el-dialog__header {
    display: none;
  }
  /deep/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    border: 1px dotted #ccc;
    border-radius: 0.4rem;
  }
  /deep/
  .avatar {
    width: 5rem;
    height: 5rem;
    display: block;
  }
}
</style>
